<template>
  <div>
    <div class="newtablist">
      <div id="btnItem" class="title-box df aic jcsb">
        <div class="title">{{ state.title }}</div>
        <div v-if="state.isExport" class="btn" @click="handleExport()">
          <i class="iconfont icon-daochu"></i>导出
        </div>
      </div>
      <div>
        <div style="padding-bottom: 10px">
          <div>
            <el-date-picker
              v-if="state.isDaQueryT"
              v-model="startDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeDatePicker"
            />
            <el-date-picker
              v-else
              v-model="startDate"
              type="date"
              placeholder="请选择查询日期"
              @change="changeDatePicker"
            />
          </div>
        </div>
        <div>
          <New-table-pageContent
            :fusion-column="state.fusionColumn"
            :table-data="state.tableList"
            :table-headers="state.tableHeaders"
            :is-slot-num="false"
            :is-pager="false"
            :table-height="550"
            :is-more-header="true"
            :lazy-tree="true"
            :expand-all="false"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            @handle-lazy-load="getChildNode"
            @handle-expent-change="expentChange"
            row-key="id"
            :loading="state.loading"
          ></New-table-pageContent>
        </div>
      </div>
    </div>
    <div>
      <exportComponent
        ref="exportRef"
        :title="state.title"
        :area-code-list="state.areaCodeList"
        :user-type="state.userType"
        :table-title="state.title"
        :DatEQuery="state.DatEQuery"
      />
    </div>
  </div>
</template>

<script setup lang="ts" name="newtablist">
import exportComponent from './components/export.vue'
import { useProxy } from '@/utils/proxy'
import { debtDetailReport, debtExport } from './api'
import { dayjs } from 'element-plus'
const exportRef = ref()
const { proxy } = useProxy()
const startDate: any = ref('')
const tabId = proxy.$route.params && (proxy.$route.params.tabId as string)
const state = reactive({
  tableList: [] as Options[],
  tableHeaders: [] as Options[],
  fusionColumn: [] as Options[],
  areaCodeList: [] as any[],
  title: '报表统计',
  isExport: true,
  loading: true,
  userType: '' as string,
  DatEQuery: { startDate: '', endDate: '' },
  isDaQueryT: !true
})
// 时间查询
const changeDatePicker = async () => {
  state.loading = true
  // state.DatEQuery = {
  //   startDate: dayjs(startDate._rawValue[0]).format('YYYY-MM-DD'),
  //   endDate: dayjs(startDate._rawValue[1]).format('YYYY-MM-DD')
  // }
  if (state.isDaQueryT) {
    state.DatEQuery = {
      startDate: dayjs(startDate._rawValue[0]).format('YYYY-MM-DD'),
      endDate: dayjs(startDate._rawValue[1]).format('YYYY-MM-DD')
    }
  } else {
    state.DatEQuery = {
      startDate: dayjs(startDate._rawValue[0]).format('YYYY-MM-DD'),
      endDate: ''
    }
  }
  getList()
}

// 获取数据
let getList = async () => {
  let { data } = await debtDetailReport(tabId, { ...state.DatEQuery })
  state.tableHeaders = data.tableHeaders
  state.tableList = data.tableList
  state.fusionColumn = data.fusionColumn
  state.title = data.reportName
  state.isDaQueryT = data.isDaQueryT
  state.loading = false
}
// 导出
let handleExport = async (): Promise<void> => {
  exportRef.value.state.tableId = tabId
  exportRef.value.state.show = true
  // await debtExport(tabId, { ...state.DatEQuery })
  return
}
getList()
type Options = {
  cellDataKey: string
  cellName: string
  children: any
}
const getChildNode = (row: any, event: any, resolve: any) => {
  // resolve([{ text3: 44666, text4: 9888, text30: 877999, text2: 6877, hasChildren: false, id: Date.now() }])
}

const expentChange = (row: any, expend: boolean) => {
  // console.log(row, expend, "6666");
}
</script>
<style lang="scss" scoped>
.newtablist {
  padding: 10px 18px;
  background-color: #fff;
  border-radius: 4px 4px 4px 4px;
  .title-box {
    .title {
      font-size: 20px;
      color: #666666;
      box-sizing: border-box;
    }
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
  }
}
</style>
<style lang="scss" scoped>
.title-box {
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}
.title {
  font-size: 20px;
  color: #666666;
  box-sizing: border-box;
}
.btn {
  height: 30px;
  background: rgba(85, 141, 247, 0.1);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid $blue;
  padding: 0px 9px;
  text-align: center;
  line-height: 30px;
  color: $blue;
  font-size: 16px;
  cursor: pointer;
  .iconfont {
    margin-right: 4px;
    font-size: 13px;
    margin-bottom: 1px;
  }
}
</style>
